<template>
  <div class="w">
    <el-card class="classification">
      <div class="we">
        <span class="el-icon-s-promotion"></span>
        地产分类
      </div>
      <el-row v-for="item in data" :key="item.id">
        <el-col :span="10" class="left"
          ><div>
            <img class="classImg" :src="item.image" alt="" /></div
        ></el-col>
        <el-col :span="14" class="right"
          ><div>
            <h2>{{item.title}}</h2>
            <p>{{item.desc}}</p>
          </div></el-col
        >
      </el-row>
    </el-card>
  </div>
</template>
<script>
import {getList} from '@/api/search'
export default {
 data(){
     return{
         data:[]
     }
 },
async created(){
  let res =  await getList()
  this.data =res.data
}
 
   
}
</script>

<style lang="less" scoped>
.w {
  width: 1130px;
  margin: 0 auto;
  .classification {
    padding-top: 70px;
    .classImg {
      width: 200px;
      height: 150px;
      position: static;
      margin-left: 100px;
      margin-top: 25px;
    }

    .we {
      color: #e6a23c;
      font-size: 24px;
      margin-bottom: 30px;
    }

    .el-row {
      margin-bottom: 10px;
    }
    .left {
      border: 1px solid #b0b0b0;
      height: 200px;
    }

    .right {
      border: 1px solid #b0b0b0;
      height: 200px;
      text-align: center;
      h2 {
        margin-top: 50px;
      }
      p {
        font-size: 20px;
        margin-top: 20px;
      }
    }
  }
}
</style>
